<template>
  <div>
    <!-- 搜索栏 -->
    <div class="header">
      <div  class="search-container">
          <input class="bar" type='search' confirm-type="search"  placeholder="请输入关键词进行搜索"  :value="search_txt" @input='getSearchTxt' @confirm='searchSubmit' maxlength="33"/>
        <input type="button" class="search" value="搜索" />
      </div>
     </div>
     <!-- 商品主体 -->
    <div class="main"> 
      <div class="goods" v-for="(item,index) in listData" :key="index">
        <div class="left">
          <image class="img" :src='item.img' mode='aspectFill'></image>
         </div>
        <div class="right">
          <div class="gods-tilte flex">
            {{item.name}}
           </div>
          <div class="gods-pay flex">
            <div>价格：{{item.price}}</div>
           </div>
          <div class="flex">
            <button  class="icon" style="height:90rpx;margin-top:20rpx" @tap="toGoodsDetail(item.id)">更</button>
            <button class="icon" style="height:90rpx;margin-top:20rpx" @tap="delgoods(item.id)">删</button>
          </div>
         </div>
       </div>
     </div>  
   </div>
</template>

<script>
import card from '@/components/card'

export default {
  components: {
    card
  },

  data () {
    return {
      listData: [],
      searchtxt: ''
    }
  },
  beforeMount () {
    var that = this
    console.log(that.listData)
    // 云函数调用show获取数据
    wx.cloud.callFunction({
      name: 'show',
      data: {
        name: ''
      },
      success (res) {
        console.log(res)
        that.listData = res.result.data
        console.log(that.listData)
      },
      fail (res) {
        console.log(res)
      }
    })
  },
  methods: {
    toGoodsDetail (id) {
      wx.navigateTo({
        url: '../../pages/goodsdetailchang/main?id=' + id
      })
    },
    // 搜索输入的内容获取
    getSearchTxt (e) {
      var that = this
      console.log(e)
      console.log(e.mp.detail.value)
      that.searchtxt = e.mp.detail.value
      console.log(that.searchtxt)
    },
    // 搜索回车后得到的listdata
    searchSubmit (options) {
      var that = this
      console.log(that.searchtxt)
      console.log(options)
      wx.cloud.callFunction({
        name: 'find',
        data: {
          about: that.searchtxt
        },
        success (res) {
          console.log(res)
          that.listData = res.result.data
          console.log(that.listData)
        },
        fail: console.error
      })
    },
    // 删除商品
    delgoods (id) {
      wx.cloud.database().collection('goods').where({
        id: id
      }).remove({
        success (res) {
          wx.navigateBack({
            url: '../../pages/merchgoods/main'
          })
          wx.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 3000
          })
        },
        fail (res) {
          console.log(res)
        }
      })
    }
  }
}
</script>

<style  scoped>
/* 搜索栏样式 锁定位置*/
.header{
  display: flex;
  align-items: center;
  padding: 0 10rpx;
  background-color: #fff;
  height: 100rpx;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  box-sizing: border-box;
  border: 2px solid gray;
}
/* 搜索框样式 */
.search-container{
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 10rpx;
  position: relative;
}
.bar{
  flex: 1;
  height: 68rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
}
.search{
  color: black;
  margin-left: 20rpx;
  font-size: 24rpx;
}
.placeholder{
  color: #f5f5f5;
}

/* 商品主体样式 */
.main{
  margin-top: 120rpx;
}
.goods{
  margin: auto;
  border: 2px solid gray;
  width: 90%;
  height: 350rpx;
  margin-top: 30rpx;
}
.left{
  width:190px;
  float: left;
}
.right{
  margin-left:190px;
   }
.img{
  margin: 25rpx 15rpx;
  width: 350rpx;
  height: 300rpx;
}
.flex{
   display: flex;
    justify-content: space-between;
    align-items: center;
}
.gods-tilte{
  font-size: 40rpx;
  margin-top: 25rpx;
  font-family: SimHei;
}
.gods-pay{
  font-size: 35rpx;
  margin-top: 103rpx;
  font-family: Microsoft YaHei;
}
</style>
